<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Fashionist--about us</title>
    <script src="js/jquery-1.11.1.min.js"></script>
    <link rel="Shortcut Icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/about.css">
    <script src="js/index.js"></script>
</head>
<body class="about">
    <div class="head clear">
        <div class="head_wrap">
            <div class="logo">
                <a href="#"><img src="images/logo.png" alt="网站logo"></a>
            </div>
            <ul class="nav_item">
                <li><a href="index.html">HOME</a></li>
                <li><a class="nav_more_item" href="#">PAGES</a>
                    <ul class="second_nav">
                        <li><a href="product.html">PRODUCT LIST</a></li>
                        <li><a href="product.html">PRODUCT LIST</a></li>
                        <li><a href="product.html">PRODUCT LIST</a></li>
                        <li><a href="product.html">PRODUCT LIST</a></li>
                    </ul>
                </li>
                <li>
                    <a class="nav_more_item" href="shop_list.html">SHOP</a>
                    <ul class="second_nav">
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">women's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                    </ul>
                </li>
                <li>
                    <a class="nav_more_item" href="about.html">about</a>
                    <ul class="second_nav">
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">women's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                    </ul>
                </li>
                <li><a href="blog_single.html">BLOG</a></li>
                <li><a href="contact_us.html">CONTACT</a></li>
            </ul>
            <div class="search_wrap">
                <form>
                    <input type="text" placeholder="Please input..." name="commit">
                    <button type="submit"></button>
                </form>
            </div>
        </div>
    </div>
    <!-- 控制二级菜单显示的js代码 -->
    <script>
        $(document).ready(
            function(){
                $(".nav_item li").hover(function(){
                    $(this).find(".second_nav").stop().slideDown();
                    },function(){
                    $(this).find(".second_nav").stop().slideUp();
                });
            }
        );
    </script>
    <!-- head结束 -->
    <div class="nav_title_wrap">
        <div class="nav_title">
            <a href="index.html">Home&nbsp;&nbsp;&nbsp;&#8250;</a>&nbsp;&nbsp;&nbsp;About Us
        </div>
    </div>
    <!-- 内页小导航布局结束 -->
    <!-- 我们的故事开始 -->
    <div class="our_story clear">
        <div class="story_left">
            <h2><a href="#">Our Story</a></h2>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
            </p>
        </div>
        <div class="story_right">
            <img src="images/story_pic.jpg" alt="大图">
        </div>
    </div>
    <!-- 我们的故事结束 -->
    <!-- client开始 -->
    <div class="client clear">
        <h2>What our clients say</h2>
        <div class="pn_btn">
            <div id='prev' class='scroll'>&#8249;&nbsp;prev</div>
            <div id='next' class='scroll'>next&nbsp;&#8250;</div>
        </div>
        <div id='swap_pic'>
            <!-- <div id='prev' class='scroll'>PREV</div> -->
            <!-- 左按钮 -->
            <div class='box'>
                <ul style="left: 0px" id='pics' class='pics'>
                    <li>
                        <p>
                            <a href="#">
                                <img src="images/head_icon_01.jpg" alt="头像">
                                <b>nICKLAS MONIG</b>
                                <i>Stylist</i>
                                <span>
                                    "At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus"
                                </span>
                            </a>
                        </p>
                        <p>
                            <a href="#">
                                <img src="images/head_icon_02.jpg" alt="头像">
                                <b>LISA MONICALI</b>                            
                                <i>CEO</i>
                                <span>
                                    "At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sit amet."
                                </span>
                            </a>
                        </p>
                        <p class="m_right">
                            <a href="#">
                                <img src="images/head_icon_03.jpg" alt="头像">
                                <b>Marc TARRENCE</b>
                                <i>Shop Owner</i>                           
                                <span>
                                    "At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea taks est Lorem"
                                </span>
                            </a>
                        </p>
                    </li>
                    <li>
                        <p class="m_left">
                            <a href="#">
                                <img src="images/head_icon_01.jpg" alt="头像">
                                <b>nICKLAS MONIG</b>
                                <i>Stylist</i>
                                <span>
                                    "At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem"
                                </span>
                            </a>
                        </p>
                        <p>
                            <a href="#">
                                <img src="images/head_icon_02.jpg" alt="头像">
                                <b>nICKLAS MONIG</b>
                                <i>Stylist</i>
                                <span>
                                    "At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem"
                                </span>
                            </a>
                        </p>
                        <p>
                            <a href="#">
                                <img src="images/head_icon_03.jpg" alt="头像">
                                <b>nICKLAS MONIG</b>
                                <i>Stylist</i>
                                <span>
                                    "At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem"
                                </span>
                            </a>
                        </p>
                    </li>
                </ul>
            </div>
            <!-- 右按钮 -->
            <!-- <div id='next' class='scroll'>NEXT</div> -->
        </div>
    </div>
    <!-- client轮播js代码 -->
    <script type='text/javascript'>
        (function(){
            var vari={
                width:960,
                pics:document.getElementById("pics"),
                prev:document.getElementById("prev"),
                next:document.getElementById("next"),
                len:document.getElementById("pics").getElementsByTagName("li").length,
                intro:document.getElementById("pics").getElementsByTagName("p"),
                now:1,
                step:5,
                dir:null,
                span:null,
                span2:null,
                begin:null,
                begin2:null,
                end2:null,
                move:function(){
                    if(parseInt(vari.pics.style.left,10)>vari.dir*vari.now*vari.width&&vari.dir==-1){
                        vari.step=(vari.step<2)?1:(parseInt(vari.pics.style.left,10)-vari.dir*vari.now*vari.width)/5;
                        vari.pics.style.left=parseInt(vari.pics.style.left,10)+vari.dir*vari.step+"px";
                    }
                    else if(parseInt(vari.pics.style.left,10)<-vari.dir*(vari.now-2)*vari.width&&vari.dir==1){
                        vari.step=(vari.step<2)?1:(-vari.dir*(vari.now-2)*vari.width-parseInt(vari.pics.style.left,10))/5;
                        vari.pics.style.left=parseInt(vari.pics.style.left,10)+vari.dir*vari.step+"px";
                    }
                    else{
                        vari.now=vari.now-vari.dir;
                        clearInterval(vari.begin);
                        vari.begin=null;
                        vari.step=5;
                        vari.width=960;
                    }
                },
            };
            vari.prev.onclick=function(){
                if(!vari.begin&&vari.now!=1){
                    vari.dir=1;
                    vari.begin=setInterval(vari.move,20);
                }
                else if(!vari.begin&&vari.now==1){
                    vari.dir=-1
                    vari.width*=vari.len-1;
                    vari.begin=setInterval(vari.move,20);
                };
            };
            vari.next.onclick=function(){
                if(!vari.begin&&vari.now!=vari.len){
                    vari.dir=-1;
                    vari.begin=setInterval(vari.move,20);
                }
                else if(!vari.begin&&vari.now==vari.len){
                    vari.dir=1
                    vari.width*=vari.len-1;
                    vari.begin=setInterval(vari.move,20);
                };
            };
        })();
    </script>
    <!-- client结束 -->
    <div class="good_at">
        <div class="good_at_wrap">
            <h2>What we are good at</h2>
            <span>OUR SERVICE CUSTOM FEATURES</span>
            <ul>
                <li>
                    <a href="#">Moder Clothes Design</a>
                    <p>
                        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <span class="list_bg_01"></span>                 
                </li>
                <li class="m_right">
                    <a href="#">Marketing / Sales</a>
                    <p>
                        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                    </p>
                    <span class="list_bg_02"></span>                 
                </li>
                <li>
                    <a href="#">Styling</a>
                    <p>
                        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <span class="list_bg_03"></span>                 
                </li>
                <li class="m_right">
                    <a href="#">Trendsetter</a>
                    <p>
                        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                    </p>
                    <span class="list_bg_04"></span>                 
                </li>
            </ul>
            <input type="button" value="START SHOPPING">
        </div>
    </div>
    <!-- footer开始 -->
    <div class="footer clear">
        <div class="footer_top">
            <div class="footer_left">
                <a href="#"><img src="images/logo.png" alt="logo"></a>
                <p class="describe"> 
                    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
                </p>
                <p class="footer_share clear">
                    <i>&#xe624;</i>
                    <a href="#">TWITTER</a>
                    <i>&#xe79d;</i>
                    <a href="#">FACEBOOK</a>
                    <i>&#xe625;</i>
                    <a href="#">INSTAGRAM</a>
                    <i>&#xe619;</i>
                    <a href="#">PINTEREST</a>
                </p>
            </div>
            <div class="footer_right clear">
                <ul>
                    <li>
                        <a href="#">ABOUT US</a>
                        <span>About Fashionist </span>
                        <span>Careers</span>
                        <span>Journal</span>
                        <span>Investor Relations</span>
                        <span>Our Stores</span>
                    </li>
                    <li>
                        <a href="#">INFORMATION</a>
                        <span>Refund</span>
                        <span>Policy for Buyer</span>
                        <span>Shipping</span>
                        <span>E-Commerce</span>
                        <span>Site map</span>
                    </li>
                    <li>
                        <a href="#">HELP CENTER</a>
                        <span>My Account</span>
                        <span>Delivery</span>
                        <span>Find a store</span>
                        <span>Contact Us</span>
                        <span>FAQs</span>
                    </li>
                    <li>
                        <a href="#">COMPANY</a>
                        <span>Return Policy</span>
                        <span>Privacy Policy</span>
                        <span>Product Warranty</span>
                        <span>Forum</span>
                        <span>Order Tracking</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="copyright">
            <span>© 2016 by Fashionist| All rights reserved</span>
            <i>
                <img src="images/pay_01.jpg" alt="支付方式1">
                <img src="images/pay_02.jpg" alt="支付方式2">
                <img src="images/pay_03.jpg" alt="支付方式3">
                <img src="images/pay_04.jpg" alt="支付方式4">
                <img src="images/pay_05.jpg" alt="支付方式5">
            </i>
        </div>
    </div>
    <!-- footer结束 -->
</body>
</html>